<script setup lang="ts">
// vue
import { ref } from 'vue'
import { useMemberStore } from '@/stores'
import { onLoad } from '@dcloudio/uni-app'
// icon
import qr from '@/static/icon/index/qr.svg'
import star from '@/static/icon/index/star.svg'
// 组件
import iconContainer from '@/components/container/icon-container.vue'

// 创建仓库
const memberStore = useMemberStore()

/**
 * 跳转到登录页面
 */
const onGoToLogin = () => {
  if (!memberStore.profile) {
    // 跳转到登录页面
    uni.navigateTo({ url: '/pages/login/login' })
  }
}
</script>

<template>
  <!-- 商店基本信息 -->
  <view class="store-info shadow bg-blue" @tap="onGoToLogin">
    <!-- 顶部信息 -->
    <view class="top-info" v-if="memberStore.profile">
      <!-- 左侧信息 -->
      <view class="top-left">
        <!-- 头像和名称 -->
        <view class="avatar-name">
          <navigator url="/pagesMember/profile/profile" hover-class="none">
            <image
              :src="
                memberStore.profile?.avatar ||
                'https://www.diulegemingzi.com/api/image/get/2/logo.png'
              "
              class="avatar"
              mode="aspectFill"
            ></image>
          </navigator>
          <view class="name-code">
            <text class="name">{{ memberStore.profile?.nickname }}</text>
            <text class="code">ID:{{ memberStore.profile?.id }}</text>
          </view>
        </view>
      </view>
      <!-- 右侧信息 -->
      <view class="top-right">
        <!-- <iconContainer
          :icon="qr"
          class="qrcode-image"
          :size="'80rpx'"
        ></iconContainer>
        <text class="qrcode-text">会员码</text> -->
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="bottom-info" v-if="memberStore.profile">
      <view class="bottom-item">
        <text class="label">积分</text>
        <text class="value">0</text>
      </view>

      <iconContainer
        :icon="star"
        class="star-image"
        :size="'30rpx'"
      ></iconContainer>

      <view class="bottom-item">
        <text class="label">余额</text>
        <text class="value">0</text>
      </view>

      <iconContainer
        :icon="star"
        class="star-image"
        :size="'30rpx'"
      ></iconContainer>

      <view class="bottom-item">
        <text class="label">优惠卷</text>
        <text class="value">0</text>
      </view>
    </view>

    <!-- 未登录信息 -->
    <view class="not-login" v-else>
      <text class="not-login-text">请登录后查看会员信息</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
/* 商店基本信息 */
.store-info {
  // 内容居中
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 90%;
  margin: 0 auto;
  min-height: 150rpx;
  // background-color: rgb(255, 255, 255);
  background: rgb(222, 252, 249);
  background: linear-gradient(
    90deg,
    rgb(227, 249, 255) 0%,
    rgba(255, 255, 255, 1) 30%,
    rgba(255, 255, 255, 1) 70%,
    rgb(255, 241, 204) 100%
  );
  color: #333;
  // 圆角
  border-radius: 20rpx;
  margin-top: 40%;
  // 内边距
  padding: 20rpx;

  /* 顶部信息 */
  .top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 5%;

    /* 顶部左侧 */
    .top-left {
      width: 100%;
      height: 100%;
      .avatar-name {
        display: flex;

        .avatar {
          width: 100rpx;
          height: 100rpx;
          // 右边距
          margin-right: 30rpx;
          border-radius: 50%;
        }

        .name-code {
          // flex布局
          display: flex;
          // 竖直排列
          flex-direction: column;
          // 左对齐
          justify-content: center;
          align-items: flex-start;

          .name {
            font-size: 30rpx;
            // 加粗
            font-weight: 600;
          }

          .code {
            // 灰色
            color: #999;
            font-size: 25rpx;
            margin-top: 10rpx;
          }
        }
      }
    }

    /* 顶部右侧 */
    .top-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .qrcode-text {
        font-size: 20rpx;
        color: #999;
        // 上边距
        margin-top: 10rpx;
      }

      .qrcode-image {
        margin-top: 10rpx;
      }
    }
  }

  /* 底部信息 */
  .bottom-info {
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    // 下边距
    margin-bottom: 10rpx;
    color: #333;

    .bottom-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 50rpx;

      .label {
        font-size: 28rpx;
        color: #333;
      }

      .value {
        font-size: 25rpx;
        // 金色
        color: rgb(203, 188, 48);
      }
    }
  }
}

.not-login-text {
  font-size: 30rpx;
}
</style>
